<template>
  <div class="feedback disposal">
    <!-- <h3 class="title fix"><span class="back" @click="back"></span>预警处置</h3> -->
    <div class="mou_gary">
      <div class="feedInner">
       
        <div class="feedInfor item" @click="showTimeSelect">
          <label>处置时间</label>
            <input
              type="text"
              placeholder="请选择处置时间"
              class="disposal_time"
              v-model="startTimeValue"
			        disabled>
        </div>
        <div class="item">
          <van-field
            v-model="content"
            rows="2"
            autosize
            label="处置情况"
            type="textarea"
            maxlength="300"
            placeholder="请输入处置情况"
            show-word-limit
          />
        </div>

        <div class="item">
          <van-field label="处置人" v-model="disposeName" placeholder="请输入处置人姓名" />
        </div>
        <div class="item">
            <label>上传照片</label>
            <van-uploader v-model="fileList" 
              multiple 
              :max-count="3" 
              :max-size="20000 * 1024" 
              @oversize="onOversize"
              :before-read="beforeRead"
              :after-read="afterRead"
              :before-delete="delUploadImg"
            />
        </div>
      </div>
    </div>
    <div style="height:1.5rem"></div>
    <span class="commit" @click="submit">提交</span>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
          <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            @confirm="confirmFn()"
            @cancel="cancelFn()"
          />
        </van-popup>
  </div>
</template>

<script>
// import imageupload from "../components/ImageUpload";
import config from "../http/config";
import { formatDate,formatNewDate } from "@/js/date";
export default {
  data() {
    return {
      fileList: [],
      paths: [],
      disposeName:'',
      content: "", //输入框文本内容
      change: [false, false, false],
      number: 6,
      show:false,
      currentDate: new Date(),
      startTimeValue:"",
      timeValue:""
    };
  },
  computed:{
    ids(){
      let str = ''
      this.fileList.forEach(file => {
        str += file.url + ','
      })
      return str
    } 
  },
  // components: { imageupload },
  methods: {
     onOversize(file) {
      console.log(file);
      this.$LoadView.showToast('文件大小不能超过 20M');
    },
// 返回布尔值
    beforeRead(file) {
      if (file instanceof Array) {
        //判断是否是数组
        file.forEach((v) => {
          this.checkFile(v);
        });
      } else {
        this.checkFile(file);
      }
      return true;
    },
    //图片类型检查
    checkFile(file) {
      const format = ["jpg", "png", "jpeg", "bmp"];
      const index = file.name.lastIndexOf(".");
      const finalName = file.name.substr(index + 1);
      if (!format.includes(finalName.toLowerCase())) {
        this.$LoadView.showToast("请上传" + format.join(",") + "格式图片");
        return false;
      }
    },
    afterRead(file) {
    // 此时可以自行将文件上传至服务器
      if (file instanceof Array) {
        file.map((v) => {
          v.status = "uploading";
          v.message = "上传中...";
          this.uploadImg(v);
        });
      } else {
        file.status = "uploading";
        file.message = "上传中...";
        this.uploadImg(file);
      }
    },
    //上传
    uploadImg(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      this.$api.reqApi.uploadImg( formData)
        .then((res) => {
          if (res.data) {
            if (file instanceof Array) {
              //判断是否是数组
              file.map((v, i) => {
                v.status = "success";
                v.message = "";
                v.url = res.data[i];
              });
            } else {
              file.status = "success";
              file.message = "";
              file.url = res.data;
            }
            console.log('this.fileList',this.fileList)
          }
        })
        .catch((err) => {
          this.$notify({
            type: "warning",
            duration: 1000,
            message: "上传失败",
          });
        });
    },
    //删除
    delUploadImg(item) {
      this.fileList = this.fileList.filter((v) => v.url != item.url);
      console.log('this.fileList',this.fileList)
    },
    showTimeSelect(){
      this.show = true
    },
    confirmFn() {
      // 确定按钮
      this.startTimeValue = this.timeFormat(this.currentDate);
      this.timeType = "0"
      this.timeValue = this.currentDate.getTime()
      this.show = false;
    },
    cancelFn() {
      this.show = false;
    },
     timeFormat(time) {
      // 时间格式化 2019-09-08
      return formatNewDate(time, 2);
    },
    mounted() {
      let _this = this;
      
    },
    submit() {
        this.$LoadView.showLoading("");
        this.detalrequest();
    },

    //预警处置
    detalrequest() {
      let _this = this;
      let param = {};
      param.alarmid = this.$route.query.alarmId;
      param.item = this.content;
      param.dealType = this.gettype();
      param.fileids = this.ids.toString();
      param.time = this.timeValue;
      param.userId = this.$store.state.userInfo.id
      param.userName = this.$store.state.userInfo.loginName
      param.disposeName = this.disposeName
      this.$api.reqApi.alarmdeal(param).then(res => {
        console.log(res);
        this.$notify({
            type: "warning",
            duration: 1000,
            message: res.message,
          });
        if (res.code === "200") {
          _this.$router.go(-1);
        }
      });
    },
    closeImg(e) {
      this.paths.splice(e, 1);
    },
    choice(e) {
      this.change = [false, false, false];
      this.change.splice(e, 1, true);
    },
    gettype() {
      let positon = 0;
      this.change.forEach((item, index) => {
        if (item) {
          positon = index;
        }
      });
      return positon + 1;
    }
  }
};
</script>

<style scoped lang="stylus">
.feedInner {
  background: #ffffff;
  padding: 0 0.3rem;
}

.disposal {
  display: flex;
  flex-direction: column;
}

.feedback-tit {
  color: #979ea0;
  font-size: 0.24rem;
  line-height: 0.77rem;
}

.warn_type {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.2rem;

  li {
    flex: 1;
    height: 0.6rem;
    line-height: 0.6rem;
    background: #f1f1f1;
    text-align: center;
    border-radius: 0.08rem;
    margin-right: 0.24rem;

    &.on {
      background: #428ee4;
      color: #fff;
      box-shadow: 1px 2px 6px 1px rgba(66, 142, 228, 0.4);
    }
  }
}

.feedInfor {
  display flex
}

.disposal_time {
  width: 50%;
  height: 100%;
  border: 0;
  background:transparent;
}

textarea {
  width: 100%;
  display: block;
  height: 1.18rem;
  border: #dde0e4 1px solid;
  border-radius: 3px;
  padding: 0.1rem;
  box-sizing: border-box;
}

.item {
  margin-top: 0.6rem;
  border-bottom 1px solid #f3f3f3;
  min-height 50px;
  label {
    font-size: 0.3rem;
    
  }
}

.photo_box {
  display: flex;
  flex-direction: row;

  li {
    width: 1.78rem;
    height: 1.78rem;
    border: #d1d1d1 dashed 1px;
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      color: #cccccc;
      font-size: 0.5rem;
    }
  }
}

.imageup {
  margin-top: 0.5rem;
}

.mou_gary {
  flex: 1;
  overflow: auto;
}
 label{
   display inline-block;
    width  6.2em;
    color: #646566;
  }
  .van-cell{
    padding 0 !important;
  }
</style>
